<%-- 
    Document   : lockscreen
    Created on : Aug 18, 2014, 3:01:39 PM
    Author     : CSCADMIN
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="lockscreen">
<head>
<meta charset="UTF-8">
<title>CSC Vietnam eBanking | Lockscreen</title>
<meta
	content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
	name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="resources/lockscreen/css/bootstrap.min.css" rel="stylesheet"
	type="text/css" />
<!-- font Awesome -->
<link href="resources/lockscreen/css/font-awesome.min.css"
	rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="resources/lockscreen/css/AdminLTE.css" rel="stylesheet"
	type="text/css" />

<script>
$(window).on("navigate", function (event, data) {
	  var direction = data.state.direction;
	  if (direction == 'back') {
	    alert("back")
	  }
	  if (direction == 'forward') {
	    // do something else
	  }
	});
</script>
</head>
<body onload="noBack();"
    onpageshow="if (event.persisted) noBack();" onunload="" >
	<!-- Automatic element centering using js -->
	<div class="center">
		<div class="headline text-center" id="time">
			<!-- Time auto generated by js -->
		</div>
		<!-- /.headline -->

		<!-- User name -->
		<div class="lockscreen-name" style="font-size: 24px">${user}</div>
		<form action="loginagain.html" method="post">

			<!-- START LOCK SCREEN ITEM -->
			<div class="lockscreen-item">
				<!-- lockscreen credentials (contains the form) -->
				<div class="lockscreen-credentials">
					<div class="input-group">
						<input type="hidden" name="username" value="" class="form-control" />
						<input type="password" class="form-control" placeholder="Password"
							name="password" />
						<div class="input-group-btn">
							<button class="btn btn-flat" type="submit">
								<i class="fa fa-arrow-right text-muted"></i>
							</button>
						</div>
					</div>
				</div>
				<!-- /.lockscreen credentials -->

			</div>
			<!-- /.lockscreen-item -->
		</form>

		<div class="lockscreen-link">
			<a href="logout.html">Or sign in as a different user</a>
		</div>
	</div>
	<!-- /.center -->

	<!-- jQuery 2.0.2 -->
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<!-- Bootstrap -->
	<script src="resources/lockscreen/js/bootstrap.min.js"
		type="text/javascript"></script>

	<!-- page script -->
	<script type="text/javascript">
		//
		$(function() {
			startTime();
			$(".center").center();
			$(window).resize(function() {
				$(".center").center();
			});
		});

		/*  */
		function startTime() {
			var today = new Date();
			var h = today.getHours();
			var m = today.getMinutes();
			var s = today.getSeconds();

			// add a zero in front of numbers<10
			m = checkTime(m);
			s = checkTime(s);

			//Check for PM and AM
			var day_or_night = (h > 11) ? "PM" : "AM";

			//Convert to 12 hours system
			if (h > 12)
				h -= 12;

			//Add time to the headline and update every 500 milliseconds
			$('#time').html(h + ":" + m + ":" + s + " " + day_or_night);
			setTimeout(function() {
				startTime()
			}, 500);
		}

		function checkTime(i) {
			if (i < 10) {
				i = "0" + i;
			}
			return i;
		}

		/* CENTER ELEMENTS IN THE SCREEN */
		jQuery.fn.center = function() {
			this.css("position", "absolute");
			this.css("top", Math.max(0, (($(window).height() - $(this)
					.outerHeight()) / 2)
					+ $(window).scrollTop())
					- 30 + "px");
			this.css("left", Math.max(0, (($(window).width() - $(this)
					.outerWidth()) / 2)
					+ $(window).scrollLeft())
					+ "px");
			return this;
		}
	</script>
</body>
</html>
